{% extends "base.html" %}
{% from "macros.html" import render_movie %}

{% block title %}Filters & Macros - Flask Templates Demo{% endblock %}

{% block content %}
<h2>Template Filters and Macros</h2>

<div class="row">
    <div class="col-md-6">
        <h3>Built-in Filters</h3>
        <table class="table">
            <thead>
                <tr>
                    <th>Filter</th>
                    <th>Example</th>
                    <th>Result</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><code>upper</code></td>
                    <td><code>{% raw %}{{ user.username|upper }}{% endraw %}</code></td>
                    <td>{{ user.username|upper }}</td>
                </tr>
                <tr>
                    <td><code>capitalize</code></td>
                    <td><code>{% raw %}{{ "hello world"|capitalize }}{% endraw %}</code></td>
                    <td>{{ "hello world"|capitalize }}</td>
                </tr>
                <tr>
                    <td><code>truncate</code></td>
                    <td><code>{% raw %}{{ "This is a very long string"|truncate(10) }}{% endraw %}</code></td>
                    <td>{{ "This is a very long string"|truncate(10) }}</td>
                </tr>
                <tr>
                    <td><code>safe</code></td>
                    <td><code>{% raw %}{{ "&lt;strong&gt;Bold Text&lt;/strong&gt;"|safe }}{% endraw %}</code></td>
                    <td>{{ "<strong>Bold Text</strong>"|safe }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    
    <div class="col-md-6">
        <h3>Custom Filters</h3>
        <table class="table">
            <thead>
                <tr>
                    <th>Filter</th>
                    <th>Example</th>
                    <th>Result</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><code>reverse</code></td>
                    <td><code>{% raw %}{{ "Flask"|reverse }}{% endraw %}</code></td>
                    <td>{{ "Flask"|reverse }}</td>
                </tr>
                <tr>
                    <td><code>shuffle</code></td>
                    <td><code>{% raw %}{{ [1, 2, 3, 4, 5]|shuffle }}{% endraw %}</code></td>
                    <td>{{ [1, 2, 3, 4, 5]|shuffle }}</td>
                </tr>
                <tr>
                    <td><code>currency</code></td>
                    <td><code>{% raw %}{{ 1234.56|currency }}{% endraw %}</code></td>
                    <td>{{ 1234.56|currency }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="mt-4">
    <h3>Using Macros</h3>
    <p>Reusable movie rendering macro:</p>
    
    {% if movies %}
        {% for movie in movies[:3] %}
            {{ render_movie(movie) }}
        {% endfor %}
    {% endif %}
</div>

<div class="mt-4">
    <h3>Template Tests</h3>
    <ul>
        <li>Is 42 more_than_100? {% if 42 is more_than_100 %}Yes{% else %}No{% endif %}</li>
        <li>Is 1 odd? {% if 1 is odd %}Yes{% else %}No{% endif %}</li>
        <li>Is "Flask" a string? {% if "Flask" is string %}Yes{% else %}No{% endif %}</li>
        <li>Is [] empty? {% if [] is empty %}Yes{% else %}No{% endif %}</li>
    </ul>
</div>
{% endblock %}